import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { Area } from '@/components/Charts';
import styles from './index.less';

@connect(({ commonModel }) => ({ commonModel }))
class AreaDemo extends Component {
  componentDidMount() {
    this.fetch();
  }

  fetch = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'commonModel/query',
      targetKey: 'areaData',
      payload: {},
    });
  };

  render() {
    const {
      commonModel: { areaData: { simpleAreaData = [], expandAreaData = [] } = {} },
    } = this.props;
    return (
      <Row className={styles.chartRow}>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <Area height={200} data={simpleAreaData} showYUnit unit="%" showTooltipTitle={false} />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartPanel}>
            <Area
              height={200}
              data={expandAreaData}
              groupField="group"
              fieldExpand={[
                { field: 'y1', rename: '西药费用' },
                { field: 'y2', rename: '中草药费用' },
              ]}
              x="orgName"
              unit="元"
            />
          </div>
        </Col>
        <Col span={8}>
          <div className={styles.chartDarkPanel}>
            <Area
              height={200}
              data={expandAreaData}
              groupField="group"
              fieldExpand={[
                { field: 'y1', rename: '西药费用' },
                { field: 'y2', rename: '中草药费用' },
              ]}
              x="orgName"
              unit="元"
              theme="dark"
            />
          </div>
        </Col>
      </Row>
    );
  }
}

export default AreaDemo;
